---
title: Déployer votre site Astro sur GitHub Pages
description: Comment déployer votre site Astro sur le Web à l'aide des GitHub Pages.
type: deploy
i18nReady: true
---

Vous pouvez utiliser [GitHub Pages](https://pages.github.com/) pour héberger un site Astro directement depuis un dépôt sur [GitHub.com](https://github.com/).

## Comment déployer

Vous pouvez déployer un site Astro sur les GitHub Pages en utilisant une [GitHub Actions](https://github.com/features/actions) pour construire (Build) et déployer automatiquement votre site. Pour ce faire, votre code source doit être hébergé sur GitHub.

Astro maintient l'action officielle `withastro/action` pour déployer vos projets avec très peu de configuration. Suivez les instructions ci-dessous pour déployer votre site Astro sur GitHub Pages, et consultez [le README du GitHub Action Astro](https://github.com/withastro/action) pour plus d'informations.

## Configurer Astro pour les pages GitHub

### Déployer vers une URL `github.io`

Définissez les options [`site`](/fr/reference/configuration-reference/#site) et [`base`](/fr/reference/configuration-reference/#base) dans `astro.config.mjs`.

```js title="astro.config.mjs" ins={4-5}
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'my-repo',
})
```

#### `site`

La valeur de `site` doit être l'une des suivantes :

- L'URL suivante en fonction de votre nom d'utilisateur : `https://<username>.github.io`
- L'URL aléatoire autogénérée pour une [page privée de l'organisation GitHub](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) : `https://<random-string>.pages.github.io/`


#### `base`

Une valeur pour `base` peut être requise pour qu'Astro considère le nom de votre dépôt (par exemple `/my-repo`) comme la racine de votre site web.

:::note
  Ne mettez pas de paramètre `base` si :

- Votre page est servie depuis le dossier racine.
- Votre référentiel est situé à `https://github.com/<USERNAME>/<USERNAME>.github.io`.
:::

La valeur de `base` doit être le nom de votre dépôt commençant par un slash, par exemple `/mon-blog`. Ceci afin qu'Astro comprenne que la racine de votre site web est `/mon-repo`, plutôt que le `/` par défaut.

:::caution
    Lorsque cette valeur est configurée, tous les liens internes de votre page doivent être préfixés par votre valeur `base` :

```astro ins="/my-repo"
<a href="/my-repo/about">About</a>
```

En savoir plus sur [configurer une valeur `base`](/fr/reference/configuration-reference/#base)
:::

### Utiliser les pages GitHub avec un domaine personnalisé

:::tip[Configurer un domaine personnalisé]
Vous pouvez mettre en place un domaine personnalisé en ajoutant le fichier `./public/CNAME` suivant à votre projet :

```js title="public/CNAME"
sub.mydomain.com
```

Ceci déploiera votre site sur votre domaine personnalisé au lieu de `user.github.io`. N'oubliez pas de [configurer les DNS pour votre fournisseur de domaine](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain).   
:::

Pour configurer Astro afin d'utiliser les pages GitHub avec un domaine personnalisé, définissez votre domaine comme valeur pour `site`. Ne définissez pas de valeur pour `base` :

```js title="astro.config.mjs" ins={4}
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
})
```

## Configurer une action GitHub

1. Créez un nouveau fichier dans votre projet à `.github/workflows/deploy.yml` et collez le YAML ci-dessous.

    ```yaml title="deploy.yml"
    name: Deploy to GitHub Pages

    on:
      # Déclenchez le workflow chaque fois que vous poussez vers la branche `main`
      # Vous utilisez un nom de branche différent ? Remplacez `main` par le nom de votre branche
      push:
        branches: [ main ]
      # Vous permet d'exécuter ce workflow manuellement à partir de l'onglet Actions sur GitHub.
      workflow_dispatch:
      
    # Autoriser cette tâche à cloner le dépôt et à créer un déploiement de page
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v4          
          - name: Install, build, and upload your site
            uses: withastro/action@v2
            with:
                # path: . # L'emplacement racine de votre projet Astro dans le dépôt. (facultatif)
                # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (facultatif)
                # package-manager: yarn # Le gestionnaire de paquets Node qui doit être utilisé pour installer les dépendances et build votre site. Détecté automatiquement en fonction de votre lockfile. (facultatif)

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4
    ```

    :::note
    L'action astro prend quelques entrées optionnelles. Celles-ci peuvent être fournies en décommentant la ligne `with:` et l'entrée que vous voulez utiliser.
    :::

    :::caution
   La [GitHub Action](https://github.com/withastro/action) officielle Astro recherche un lockfile pour détecter votre gestionnaire de paquets préféré (`npm`, `yarn`, `pnpm`, ou `bun`). Vous devez commit le fichier `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, ou `bun.lockb` généré automatiquement par votre gestionnaire de paquets dans votre référentiel.
    :::

2. Sur GitHub, allez dans l'onglet **Settings** (Paramètres) de votre dépôt et trouvez la section **Pages** des paramètres.  

3. Choisissez **GitHub Actions** comme **Source** de votre site.

4. Validez (Commit) le nouveau fichier Workflow (flux de travail) et poussez-le (Push) sur GitHub. 


Votre site devrait maintenant être publié ! Lorsque vous apportez des modifications au dépôt de votre projet Astro, l'action GitHub les déploie automatiquement pour vous.
